import { Link } from '@/desktop/components'
import createAppImg from './create-app.png'
import dnsImg from './dns.png'
import setApp2Img from './set-app-2.png'
import setAppImg from './set-app.png'

function Image({ src }: { src: string }) {
  return <a href={src} target="_blank" rel="noreferrer" css={s.imageWrap}>
    <img src={src} title="点击查看大图" />
  </a>
}

export const appGuide = (domainPrefix: string, baseDomain: string, ip: string) => <ol
  css={s.inputGuide}
>
  <li>
    <div>
      给域名{baseDomain ? <code> {baseDomain} </code> : ''}设置域名解析（必须按以下值设置）。
    </div>
    <div>
      主机记录：<code>{domainPrefix}</code>，记录类型：<code>A记录</code>，记录值：
      <code>{ip}</code>。
    </div>
    <div>在腾讯云上配置的例子：</div>
    <div>
      <Image src={dnsImg} />
    </div>
  </li>

  <li>
    <div>
      点击 <code>企微后台</code> - <code>应用管理</code> - <code>自建</code> - <code>创建应用</code>
    </div>
    <div>
      网址：
      <Link href="https://work.weixin.qq.com/wework_admin/frame#apps/createApiApp" />
    </div>
    <div>应用名称随意，可见范围选整个公司</div>
    <div>
      <Image src={createAppImg} />
    </div>
  </li>

  <li>
    <div>
      应用创建好后，到 <code>企微后台</code> - <code>客户与上下游</code> - <code>客户联系</code> -{' '}
      <code>点击“API”按钮</code> - <code>可调用应用</code>，<br />
      选中刚创建的应用。
    </div>
    <div>
      <Image src={setAppImg} />
    </div>
  </li>

  <li>
    <div>
      回到 <code>应用管理</code>，点击刚创建的应用，在其详情页点击 <code>接收消息</code> -{' '}
      <code>设置API接收</code>，<br />
      用外面的值填写表单。
    </div>
    <div>
      网址：
      <Link href="https://work.weixin.qq.com/wework_admin/frame#apps" />
    </div>
    <div>
      <Image src={setApp2Img} />
    </div>
  </li>
</ol>

const s = {
  inputGuide: css`
    margin: 0;
    max-height: 70vh;
    overflow-y: auto;
    padding: 12px 0 12px 18px;
    li:not(:last-child) {
      margin-bottom: 30px;
    }
    li > div:not(:last-child) {
      margin-bottom: 6px;
    }
    code {
      color: #fa541c;
    }
  `,
  imageWrap: css`
    padding-top: 6px;
    margin-right: auto;
    img {
      border-radius: 6px;
      box-shadow: 0 0 4px #ccc;
      display: block;
      max-width: 550px;
      transition: box-shadow 0.2s;
    }
    img:hover {
      box-shadow: 0 0 8px #ccc;
    }
  `,
}
